<template lang="html">
  <div class="note-list">
    <div class="head" v-text="curClass && curClass.name"></div>
    <ul v-if="noteList.length">
      <li v-for="data in noteList" :class="{'cur':data === curNote}" @click="editNote($index)">
        <h4 v-text="data.title"></h4>
        <p v-text="data.brief"></p>
        <span v-text="data.pubdate | getDate"></span>
      </li>
    </ul>
    <p v-else class="msg">木有笔记哦~~~</p>
  </div>
</template>
<script>
  import $ from '../assets/lib/jquery-3.0.0.min.js'
  import { setNoteList , setCurNote} from '../vuex/actions.js'
  export default {
    vuex:{
      getters:{
        curClass:(state) => state.curClass,
        noteList:(state) => state.noteList,
        curNote:(state) => state.curNote,
      },
      actions:{
        setNoteList,
        setCurNote,
      }
    },
    methods:{
      editNote(index){
        this.setCurNote(index);
      }
    },
    watch:{
      curClass(){
        const self = this;
        $.get('http://localhost:8888/note-list' , {classId:self.curClass && self.curClass._id} , (res) => {
          if(res.state == 'ok'){
            self.setNoteList(res.data);
            self.setCurNote(0);
          };
        },'JSON');
      }
    }
  };
</script>

<style scoped>
  .note-list{
    width:320px;
    height:100%;
    position:relative;
    box-sizing:border-box;
    border-left:1px solid #EAEAEA;
    border-right:1px solid #EAEAEA;
  }
  /*提示*/
  .note-list > .msg{
    font-size:16px;
    text-align:center;
    color:#dddddd;
    line-height:3;
  }
  .note-list > .head{
    width:100%;
    height:55px;
    padding:0 10px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    box-sizing:border-box;
    font-size:16px;
    text-align:center;
    line-height:55px;
    border-bottom:1px solid #ddd;
  }
  .note-list ul{
    width:100%;
    position:absolute;
    top:55px;
    bottom:0;
    overflow-y:auto;
  }
  .note-list li{
    width:100%;
    padding:8px 15px;
    cursor:pointer;
    box-sizing:border-box;
    border-bottom:1px solid #EAEAEA;
  }
  .note-list li:hover{
    background:#eee;
  }
  .note-list li:hover h4,
  .note-list .cur > h4{
    color:#19B5FE;
  }
  .note-list .cur{
    border-right:3px solid #19B5FE;
  }
  .note-list li > h4{
    height:23px;
    font-size:14px;
    font-weight:normal;
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden;
    -moz-transition:color 0.15s;
    transition:color 0.15s;
  }
  .note-list li > p{
    color:#888;
    margin:5px 0;
  }
  .note-list li > span{
    color:#999999;
    display:block;
  }
  .note-list li > p,
  .note-list li > span{
    box-sizing:border-box;
    width:100%;
    font-size:12px;
  }
</style>
